<template>
	<view class="alert-contain">
		<view class="alert-head">
			<text class="alert-h-title">{{ title }}</text>
		</view>
		<view class="alert-input-group">
			<!-- <input slot="alert-input" class="alert-input" placeholder="自动获得焦点" /> -->
			<slot name="alert-input"></slot>
		</view>
		<view class="alert-button-group" v-if="!isMore">
			<view class="btn-cancel"><slot name="btn-cancel"></slot></view>
			<view class="btn-submit"><slot name="btn-submit"></slot></view>
		</view>
		<view class="alert-button-group-more" v-if="isMore">
			<view class="btn-more-operate"><slot name="btn-more-operate"></slot></view>
			<view class="btn-more-operate-submit"><slot name="btn-more-operate-submit"></slot></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	props: {
		title: { type: String, default: '万漉会提示' },
		isMore: { type: [Boolean, String], default: false }
	},
	onLoad() {},
	methods: {}
};
</script>

<style lang="scss">
.alert-contain {
	width: 500rpx;
	overflow: hidden;
	border-radius: 26rpx;
	box-shadow: none;
	background: #fff;
	.alert-head {
		padding: 24rpx 32rpx 14rpx 32rpx;
		text-align: center;
		.alert-h-title {
			font-size: 34rpx;
			font-weight: 600;
			margin-top: 16rpx;
		}
	}
	.alert-input-group {
		padding: 24rpx 32rpx 40rpx 32rpx;
		.alert-input {
			height: 34rpx;
			padding: 12rpx;
			border: 1px solid #ababab;
			font-size: 26rpx;
			border-radius: 8rpx;
			color: #000;
			margin-bottom: 20rpx;
		}
	}
	.alert-button-group {
		height: 88rpx;
		border-top: 1px solid rgba(0, 0, 0, 0.2);
		color: #f24439;
		display: flex;
		flex-direction: row;
		text-align: center;
		font-size: 34rpx;
		.btn-cancel {
			flex: 1;
			border-right: 1px solid rgba(0, 0, 0, 0.2);
			height: 88rpx;
			line-height: 88rpx;
		}
		.btn-submit {
			flex: 1;
			border-right: none;
			height: 88rpx;
			line-height: 88rpx;
			font-weight: bold;
		}
	}
	.alert-button-group-more {
		color: #f24439;
		border-top: 1px solid rgba(0, 0, 0, 0.2);
		.btn-more-operate {
			display: flex;
			flex-direction: column;
			width: 100%;
			.btn-more-operate-v{
				color: red;
			}
		}
		.btn-more-operate-submit {
			display: flex;
			flex-direction: column;
			text-align: center;
			height: 88rpx;
			line-height: 88rpx;
			font-weight: bold;
		}
	}
}
</style>
